import {View, Button, Text, Image, ScrollView} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './newUserModel.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';

import {AtCurtain} from 'taro-ui';
import 'taro-ui/dist/style/components/curtain.scss';
import newUserImage from '@/assets/image/index/newUserBg.png';
import newUserBtnImage from '@/assets/image/index/newUserBtn.png';
import moneyImage from '@/assets/image/indexPage/money.png';

interface ComponentState {
  newUserModel: boolean;
}

type ITopProps = T.IProps & T.ITopProps & ComponentState;
//@ts-ignore
@connect<Partial<ITopProps>, T.ITopState>(store2Props, actions)
export default class Info extends Component<Partial<ITopProps>, T.ITopState> {
  constructor(props: ITopProps) {
    super(props);
    this.state = {
      newUserModel: false,
    };
  }
  CouponView() {
    return (
      <View className="newUserModel-coupon">
        <View className="newUserModel-coupon-left">
          <Text className="text2">
            <Text style={{fontSize: '36rpx', color: '#FE5537'}}>￥</Text>
            <Text style={{fontSize: '60rpx', color: '#FE5537', fontWeight: 500}}>5</Text>
            <Text style={{fontSize: '32rpx', color: '#FFB2A5'}}>X1</Text>
          </Text>
          <Text className="text1">满30可用</Text>
        </View>
        <View className="newUserModel-coupon-line"></View>
        <View className="newUserModel-coupon-right">
          <Text style={{fontSize: '36rpx', fontWeight: 500, color: '#333300', marginBottom: '16rpx'}}>5元特惠券</Text>
          <Text style={{fontSize: '24rpx', fontWeight: 400, color: '#999999'}}>有效期至：2023-09-01</Text>
        </View>
        <View className="newUserModel-coupon-dot"></View>
      </View>
    );
  }
  render() {
    let {
      main: {communityName, unReadNum},
      actions: {action},
    } = this.props;
    // @ts-ignore
    return (
      <AtCurtain
        // @ts-ignore
        isOpened={this.state.newUserModel}
        onClose={() => {
          this.setState({
            newUserModel: false,
          });
        }}
      >
        <View className="newUserModel">
          <Image className="newUserModelbg" src={newUserImage} />
          <View className="newUserModelMoney">
            <Image src={moneyImage} style={{width: '80rpx', height: '78rpx'}}></Image>
          </View>
          <ScrollView className="newUserModelScrollView" scrollY>
            {this.CouponView()}
            {this.CouponView()}
            {this.CouponView()}
            {this.CouponView()}
            {this.CouponView()}
            {this.CouponView()}
            {/* 占位符 */}
            <View style={{height: '100rpx'}}></View>
          </ScrollView>
          <Image
            src={newUserBtnImage}
            className="newUserModelBtn"
            onClick={() => {
              setTimeout(() => {
                this.setState({
                  newUserModel: false,
                });
              }, 200);
            }}
          ></Image>
        </View>
      </AtCurtain>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
